﻿@addTagHelper *, Blazor.Extensions.CssStyles
@using Blazor.Extensions.CssStyles.Css;
@inherits Blazor.Extensions.CssStyles.Components.ComponentWithStyles

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class=@(cssClass.Name) onclick="@IncrementCount">Click me</button>

@functions {
int currentCount = 0;
CssClass cssClass;
CssClass cssClass2;
CssClass cssClass3;

void IncrementCount()
{
    currentCount++;
}

protected override void OnInit()
{
    base.OnInit();

    cssClass = new CssClass("Button")
            .WithStyle(CssPropertyNames.Color, "green")
            .WithStyle(CssPropertyNames.Margin, "20px")
            .WithlStyleInPixelUnit(CssPropertyNames.PaddingLeft, 12)
            .WithStyle(CssPropertyNames.PaddingBottom, 15, CssUnits.Em)
            .WithStyle(CssPropertyNames.Border, NumberCssStyleValue.CreatePixelValue(5), TextCssStyleValue.CreateTextValue("dotted"))
        .AddPseudoSelector(PseudoSelector.Hover, props => props
            .WithStyle(CssPropertyNames.Color, "red")
            .WithStyle(CssPropertyNames.Width, "20px"))
       .AddMediaQuery("@media (min-width: 1024px)", props =>
            props.WithStyle(CssPropertyNames.Width, "50px"));


    cssClass2 = new CssClass("Button1")
            .WithStyle(CssPropertyNames.Color, "green")
            .WithStyle(CssPropertyNames.Margin, "20px")
            .WithlStyleInPixelUnit(CssPropertyNames.PaddingLeft, 12)
            .WithStyle(CssPropertyNames.PaddingBottom, 15, CssUnits.Em)
            .WithStyle(CssPropertyNames.Border, NumberCssStyleValue.CreatePixelValue(5), TextCssStyleValue.CreateTextValue("dotted"))
        .AddPseudoSelector(PseudoSelector.Hover, props => props
            .WithStyle(CssPropertyNames.Color, "red")
            .WithStyle(CssPropertyNames.Width, "20px"))
       .AddMediaQuery("@media (min-width: 1024px)", props =>
            props.WithStyle(CssPropertyNames.Width, "50px"));

    cssClass3 = new CssClass("Button2")
            .WithStyle(CssPropertyNames.Color, "green")
            .WithStyle(CssPropertyNames.Margin, "20px")
            .WithlStyleInPixelUnit(CssPropertyNames.PaddingLeft, 12)
            .WithStyle(CssPropertyNames.PaddingBottom, 15, CssUnits.Em)
            .WithStyle(CssPropertyNames.Border, NumberCssStyleValue.CreatePixelValue(5), TextCssStyleValue.CreateTextValue("dotted"))
        .AddPseudoSelector(PseudoSelector.Hover, props => props
            .WithStyle(CssPropertyNames.Color, "red")
            .WithStyle(CssPropertyNames.Width, "20px"))
        .AddMediaQuery("@media (min-width: 1024px)", props =>
            props.WithStyle(CssPropertyNames.Width, "50px"));

    ExportStyles(cssClass, cssClass2, cssClass3);
}
}
